<template>
    <popup
        :show="showEdit"
        :title="popTitle"
        :loading="loading"
        :async-close="true"
        width="500px"
        @close="emits('close')"
        @confirm="handleSubmit"
    >
        <div class="p-6 pb-0">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
                <el-form-item label="套餐名称" prop="name">
                    <el-input type="text" v-model="formData.name" placeholder="请输入套餐名称" />
                </el-form-item>
                <el-form-item label="套餐价格" prop="sell_price">
                    <el-input type="number" v-model="formData.sell_price" placeholder="请输入实际售价" />
                </el-form-item>
                <el-form-item label="划线价格" prop="line_price">
                    <el-input type="number" v-model="formData.line_price" placeholder="请输入划线价格" />
                </el-form-item>
                <el-form-item label="套餐标签" prop="tags">
                    <el-input type="text" v-model="formData.tags" placeholder="请输入套餐标签" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="formData.sort" :min="0" :max="999999" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="formData.is_disable">
                        <el-radio :value="0">正常</el-radio>
                        <el-radio :value="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="积分数量" prop="points_num">
                    <div class="w-[380px]">
                        <el-input
                            v-model="formData.points_num"
                            type="number"
                            :min="0"
                            :max="99999999"
                            clearable
                            placeholder="0"
                        >
                            <template #append>点</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="训练组数量" prop="train_num">
                    <div class="w-[380px]">
                        <el-input
                            v-model="formData.train_num"
                            type="number"
                            :min="0"
                            :max="99999999"
                            clearable
                            placeholder="0"
                        >
                            <template #append>条</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="智能体数量" prop="robot_num">
                    <div class="w-[380px]">
                        <el-input
                            v-model="formData.robot_num"
                            type="number"
                            :min="0"
                            :max="99999999"
                            clearable
                            placeholder="0"
                        >
                            <template #append>个</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="知识库数量" prop="know_num">
                    <div class="w-[380px]">
                        <el-input
                            v-model="formData.know_num"
                            type="number"
                            :min="0"
                            :max="99999999"
                            clearable
                            placeholder="0"
                        >
                            <template #append>个</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="MCP数量" prop="mcp_num">
                    <div class="w-[380px]">
                        <el-input
                            v-model="formData.mcp_num"
                            type="number"
                            :min="0"
                            :max="99999999"
                            clearable
                            placeholder="0"
                        >
                            <template #append>个</template>
                        </el-input>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import rechargePackApi from '@/api/market/recharge'

const emits = defineEmits(['success', 'close'])

const formRef = ref()
const showMode = ref<string>('add')
const showEdit = ref<boolean>(false)
const popTitle = computed<string>(() => {
    return showMode.value === 'edit' ? '编辑套餐' : '新增套餐'
})

// 表单数据
const loading = ref<boolean>(false)
const formData: any = reactive({
    id: 0,           // 套餐ID
    name: '',        // 套餐名称
    tags: '',        // 套餐标签
    sell_price: '',  // 套餐价格
    line_price: '',  // 原始价格
    points_num: 0,   // 积分数量
    train_num: 0,    // 训练组数量
    robot_num: 0,    // 智能体数量
    know_num: 0,     // 知识库数量
    mcp_num: 0,      // MCP数量
    sort: 0,         // 排序编号
    is_disable: 0    // 是否禁用:[0=否, 1=是]
})

// 表单规则
const formRules: any = reactive({
    name: [
        { required: true, message: '请输入套餐名称', trigger: ['blur'] },
        { max: 100, message: '套餐名称不能大于100个字符', trigger: ['blur'] }
    ],
    tags: [
        { max: 100, message: '套餐标签不能大于100个字符', trigger: ['blur'] }
    ],
    sell_price: [
        { required: true, message: '请输入套餐售价', trigger: ['blur'] }
    ],
    line_price: [
        { required: true, message: '请输入划线价格', trigger: ['blur'] }
    ]
})

/**
 * 提交表单
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()
    loading.value = true
    if (showMode.value === 'edit') {
        await rechargePackApi.edit(formData)
            .finally(() => {
                loading.value = false
            })
    } else {
        await rechargePackApi.add(formData)
            .finally(() => {
                loading.value = false
            })
    }

    feedback.msgSuccess('操作成功')
    emits('close')
    emits('success')
}

/**
 * 打开表单
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (type: string, row?: any): Promise<void> => {
    showMode.value = type
    showEdit.value = true

    if (type === 'edit') {
        const data = await rechargePackApi.detail(row.id)
        for (const key in formData) {
            if (data[key] !== null && data[key] !== undefined) {
                formData[key] = data[key]
            }
        }
    }
}

defineExpose({
    open
})
</script>
